<template>
	<div>
		<div class="d-flex justify-content-around flex-wrap">
			<div class="card" style="width: 18rem; margin: 20px;" v-for="book in page.list" :key="book.bookId">
				<img :src="imgPath + book.bookImg" class="card-img-top" style="width: 286px; height: 286px;">
				<div class="card-body">
					<h5 class="card-title text-wrap text-truncate" style="height: 48px;">{{ book.bookName }}</h5>
					<p class="card-text text-wrap text-truncate" style="height: 24px;">{{ book.bookAuthor }}</p>
				</div>
				<ul class="list-group list-group-flush">
					<li class="list-group-item d-flex justify-content-between">
						<span class="user-select-none">库存:</span>
						<span style="width: 80%;" class="text-truncate">{{ book.bookQuantity }}</span>
					</li>
					<li class="list-group-item d-flex justify-content-between">
						<span class="user-select-none">ISBN:</span>
						<span style="width: 80%;" class="text-truncate">{{ book.bookIsbn }}</span>
					</li>
				</ul>
				<div class="card-body">
					<a type="button" class="btn btn-outline-info card-link" @click="showInfo(book.bookId)">查看详情</a>
					<a type="button" class="btn btn-outline-primary card-link"
						@click="borrowBook(book.bookId, book.bookQuantity)" v-if="book.bookQuantity > 0">借阅</a>
					<a type="button" class="btn btn-danger disabled card-link" v-else>借阅</a>
				</div>
			</div>
		</div>
		<nav aria-label="Page navigation example" v-if="page.navigatepageNums.length > 1">
			<ul class="pagination justify-content-center">
				<li class="page-item">
					<button type="button" class="page-link" @click="goToFirstPage()">首页</button>
				</li>
				<li class="page-item">
					<button type="button" class="page-link" :class="page.hasPreviousPage ? '' : 'd-none'"
						@click="goToPreviousPage()">上一页</button>
				</li>
				<li class="page-item" v-for="(navigatepageNum,index) in page.navigatepageNums" :key="index"
					:class="navigatepageNum == page.pageNum ? 'active' : ' '">
					<button type="button" class="page-link" @click="goToPage(navigatepageNum)"
						v-if="navigatepageNum == page.pageNum || navigatepageNum == page.pageNum + 1 || navigatepageNum == page.pageNum + 2 || navigatepageNum == page.pageNum - 1 || navigatepageNum == page.pageNum - 2">{{navigatepageNum}}</button>
				</li>
				<li class="page-item">
					<button type="button" class="page-link" :class="page.hasNextPage ? '' : 'd-none'"
						@click="goToNextPage()">下一页</button>
				</li>
				<li class="page-item">
					<button type="button" class="page-link" @click="goToLastPage()">{{page.pages}}</button>
				</li>
			</ul>
		</nav>
	</div>

</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";
	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const store = useStore();
			store.state.ifFrameShow = true;
			//onMounted()生命周期
			onMounted(() => {
				axios
					.get("QueryAllBookByPage")
					.then((response) => {
						data.page = response.data.data
					})
					.catch((error) => console.log(error)); // 请求失败处理
			});
			const data = reactive({
				books: [],
				bookClazzs: [],
				page: {
					endRow: 0,
					hasNextPage: false,
					hasPreviousPage: false,
					isFirstPage: false,
					isLastPage: false,
					list: [],
					navigateFirstPage: 0,
					navigateLastPage: 0,
					navigatePages: 0,
					navigatepageNums: [],
					nextPage: 0,
					pageNum: 0,
					pageSize: 0,
					pages: 0,
					prePage: 0,
					size: 0,
					startRow: 0,
					total: 0
				},
				searchBook: {
					bookClassificationId: -1,
					bookName: '',
					bookIsbn: ''
				},
				imgPath: store.state.imageUrl,
				showInfo: (bookId) => {
					router.push({
						name: 'Book',
						query: {
							id: bookId,
						}
					})
				},
				borrowBook: (bookId, q) => {
					if (q <= 0) {
						alert("无库存");
					} else {
						axios
							.post("Borrow?bookId=" + bookId)
							.then((response) => {
								alert(response.data.msg)
								axios
									.get("QueryAllBookByPage")
									.then((response) => {
										data.page = response.data.data
									})
									.catch((error) => console.log(error)); // 请求失败处理
							})
							.catch((error) => console.log(error)); // 请求失败处理
					}
				},



				/////////////////////////////////////////////////////////////////////////
				goToFirstPage: () => {
					axios
						.get("QueryAllBookByPage", {
							params: {
								pageNum: 1
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				goToLastPage: () => {
					axios
						.get("QueryAllBookByPage", {
							params: {
								pageNum: data.page.pages
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				goToPreviousPage: () => {
					axios
						.get("QueryAllBookByPage", {
							params: {
								pageNum: data.page.prePage
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				goToNextPage: () => {
					axios
						.get("QueryAllBookByPage", {
							params: {
								pageNum: data.page.nextPage
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				},
				goToPage: (page) => {
					axios
						.get("QueryAllBookByPage", {
							params: {
								pageNum: page
							}
						})
						.then((response) => {
							data.page = response.data.data
						})
						.catch((error) => console.log(error)); // 请求失败处理
				}
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>
